.goodlist .zz{ font-size: 24px;font-weight:bold;  line-height: 50px; color: #379600; text-align: center;  display: block}
.goodlist{ background: url(../images/goodbg.jpg) no-repeat center; overflow: hidden; display: block; padding: 50px 0 100px }
.goodlist ul{ margin-top:50px; }
.goodlist ul li{float: left;width:276px;overflow: hidden;margin-right: 31px; position: relative; height:400px}
.goodlist ul li:nth-child(4n){ margin-right: 0 }
.goodlist ul li img{ position: absolute; top: 0; width: 203px; height: 203px; border-radius: 50%;  border: 6px solid #d1f678; z-index: 1; left: 30px }
.goodlist ul li p{ position: absolute; top: 107px; padding-top: 120px; 
    background: #379600; position: absolute;z-index: 0; padding: 120px  15px 45px; overflow: hidden; color: #fff; border-radius: 10px; transition: 0.8s; text-align: center;}
.goodlist ul li:nth-child(2n) p{ background: #204b04 }
.goodlist ul li  span{ display: block; line-height: 30px; font-size: 18px; text-align: center; font-weight:bold;  }
.goodlist ul li  i{ width: 50px; height: 2px; background: #ffe500;  margin: 10px auto ; display:block; clear: both; }
.goodlist ul li p:hover{ background: #ffa525;  }







/* Common style */
.grid figure {
  position: relative;
  z-index: 1;
  display: inline-block;
  overflow: hidden;
  margin: -0.135em;
  width: 300px;
  height: 200px;
  background: #3085a3;
  text-align: center;
  cursor: pointer;
  float: left;
  margin-bottom: 30px;
}

.grid figure img{ height: 100%; width: 100%;  }

.grid figure figcaption {
  padding: 1em;
  color: #fff;
  text-transform: uppercase;
  font-size: 1.25em;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}


.grid figure figcaption,
.grid figure a {
  position: absolute;
  top: 0;
  left: 0;
}


.grid figure p {
  letter-spacing: 1px;
  font-size: 68.5%;
}

/*---------------*/
/***** Sarah *****/
/*---------------*/

figure.effect-sarah {
  background: #62ab0e;
}

figure:nth-child(1){ height: 658px; width:870px; margin-right: 30px }

figure.effect-sarah img {
  width: -webkit-calc(100% + 20px);
  width: calc(100% + 20px);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-10px,0,0);
  transform: translate3d(-10px,0,0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

figure.effect-sarah:hover img {
  opacity: 0.4;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

figure.effect-sarah figcaption {
  text-align: left;
  padding-bottom: 30px;
  overflow: hidden;
}

figure.effect-sarah h2 {
  position: relative;
  overflow: hidden;
  padding: 0.5em 0;
  font-size: 18px;
  display: block;

}

figure.effect-sarah h2::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: #fff;
  content: '';
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
  -webkit-transform: translate3d(-100%,0,0);
  transform: translate3d(-100%,0,0);
}

figure.effect-sarah:hover h2::after {
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

figure.effect-sarah p {
  padding: 10px 0;
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(100%,0,0);
  transform: translate3d(100%,0,0);
  font-size: 14px;
  height: 94px;
  overflow: hidden;
}


figure.effect-sarah:hover p {
  opacity: 1;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}




figure:nth-child(6),figure:nth-child(7),figure:nth-child(8) { float: left; width: 388px ; margin-right: 20px; height: 278px }
figure:nth-child(8){ margin-right: 0 }






.aboutblock{ background:#f8f8f8; background-size: 100%; padding-bottom: 50px; padding-top: 50px;  }
.aboutcon{  overflow: hidden;  }
.abouttext{ float: left; width: 600px }
.abouttext div{ height:290px; overflow: hidden; }
.aboutimg{ position: relative;  float:  left; width: 550px;  height: 380px}
.aboutimg img{ position: absolute;  z-index: 10 ;left: 30px; top: 0;; width: 550px; height: 350px}
.aboutimg em{ position: absolute; background: #249c21; height: 380px; width: 550px; z-index: 5;  left: 100px; top: 30px;    }
.abouttit strong{ font-size:30px; color: #249c21; line-height: 50px }
.abouttit span{ font-size:28px; display: block;  font-weight:bold; color: #000 }

.aboutcon em{ display: block; font-size: 40px ; font-weight: bold; line-height: 60px }
.aboutcon em i{ color: #21357c }
.aboutcon p{  line-height: 25px; font-size:14px;  overflow: hidden; text-indent:24px; }





/*新闻资讯*/
.news ul{margin-bottom: 50px; overflow: hidden;}
.news ul li{ float: left; overflow: hidden; width:380px; margin-right:30px;  }
.news ul li:nth-child(3n){ margin-right:0; }
.news ul li img{ height: 264px; width: 384px }
.news ul li strong{ display: block; height: 30px; line-height:30px; 
	font-size: 16px; }
.news ul li em{ color: #999 }
.news ul li p{ line-height: 30px; margin-top:20px; height: 60px; overflow: hidden; }
.news ul li i{transition:0.8s; height: 3px; background: #208501; width: 0; overflow: hidden; 
	display: block; margin-top: 20px }
.news ul li:hover i{ width: 100% }


.newtit{ height: 60px; line-height: 60px; font-size: 18px; border-bottom: 1px solid #ccc; margin-bottom: 10px; color: #379600   }
.knowlist {float: left; overflow: hidden; width:380px; margin-right:30px;}
.knowlist:nth-child(3n){ margin-right:0; }
.knowlist dl { padding-bottom: 20px;  border-bottom: 1px solid #ddd;}
.knowlist dl dt img{ width: 386px; height: 220px }
.knowlist dl dd strong{ font-size: 18px; height: 40px; line-height: 40px; }
.knowlist dl dd p{ height: 50px; overflow: hidden; color: #666;}
.knowlist ul li{ height: 40px; line-height: 40px; overflow: hidden; font-size: 14px  }